<template>
  <q-dialog :model-value="modelValue" @update:model-value="$emit('update:modelValue', $event)">
    <q-card class="dialog-card">
      <q-card-section class="dialog-header">
        <div class="dialog-title">添加好友</div>
      </q-card-section>
      <q-card-section class="dialog-body">
        <q-form @submit="handleAddFriend" class="q-gutter-md">
          <q-input
            v-model="localUsername"
            placeholder="请输入用户ID或用户名"
            outlined
            autocomplete="off"
            autocapitalize="off"
            autocorrect="off"
            spellcheck="false"
            class="dialog-input"
            :rules="[val => !!val || '请输入用户ID或用户名']"
          />
        </q-form>
      </q-card-section>
      <q-card-actions align="right" class="dialog-actions">
        <q-btn flat label="取消" color="primary" v-close-popup class="dialog-btn" />
        <q-btn 
          flat 
          label="搜索" 
          color="primary" 
          @click="handleAddFriend" 
          :loading="loading" 
          class="dialog-btn dialog-btn-primary" 
        />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'

const props = defineProps<{
  modelValue: boolean
  loading?: boolean
}>()

const emit = defineEmits<{
  'update:modelValue': [value: boolean]
  'add-friend': [username: string]
}>()

const localUsername = ref('')

// 监听对话框打开/关闭，重置表单
watch(() => props.modelValue, (newVal) => {
  if (newVal) {
    localUsername.value = ''
  }
})

const handleAddFriend = () => {
  if (!localUsername.value.trim()) {
    return
  }
  emit('add-friend', localUsername.value.trim())
}
</script>

<style lang="sass" scoped>
// 对话框样式优化
.dialog-card
  min-width: 350px
  border-radius: 12px
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12)
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif

.dialog-header
  padding: 24px 24px 16px 24px
  border-bottom: 1px solid rgba(0, 0, 0, 0.06)

.dialog-title
  font-size: 20px
  font-weight: 600
  color: #1D1D1F
  letter-spacing: -0.3px
  line-height: 1.4

.dialog-body
  padding: 20px 24px

.dialog-input
  font-size: 15px
  
  :deep(.q-field__label)
    font-size: 14px
    font-weight: 500
    color: #3A3A3C
    letter-spacing: -0.2px
  
  :deep(.q-field__native)
    font-size: 15px
    color: #1D1D1F
    letter-spacing: -0.1px
  
  :deep(.q-field__input)
    font-size: 15px
    color: #1D1D1F

.dialog-actions
  padding: 12px 20px 20px 20px
  border-top: 1px solid rgba(0, 0, 0, 0.06)

.dialog-btn
  font-size: 15px
  font-weight: 500
  padding: 8px 16px
  min-width: 64px
  letter-spacing: -0.1px
  
  &.dialog-btn-primary
    font-weight: 600
</style>

